<template>
  <div class="pageW">
    <el-page-header @back="goBack"></el-page-header>
    <el-card class="box">
      <div class="merchant">
        <div class="top">
          <div class="title">基本信息</div>
        </div>
        <div class="main">
          <div class="left">
            <div class="item">
              <span class="tit">模板名称</span>
              <span class="text">{{ form.ruleName }}</span>
            </div>
            <div class="item">
              <span class="tit">模板ID</span>
              <span class="text">{{ form.id }}</span>
            </div>
            <div class="item">
              <span class="tit">模板说明</span>
              <span class="text">{{
                form.ruleDesc ? form.ruleDesc : "-"
              }}</span>
            </div>
            <!-- <div class="item">
              <span class="tit">分润时效</span>
              <span class="text">{{
                form.payMode == "real" ? "实时分润" : "延时分润"
              }}</span>
            </div> -->
            <div class="item">
              <span class="tit">分润模式</span>
              <span class="text">{{
                form.separateType == "1" ? "按百分比" : "按固定金额"
              }}</span>
            </div>
          </div>
          <div class="right">
            <div class="com-wrap">
              <div class="com" @click="toEdit">
                <div class="t">
                  <img src="@/assets/imgs/setting/edit.png" alt="" />
                </div>
                <div class="b">编辑</div>
              </div>
              <!-- <div class="com" @click="delFn">
                <div class="t" style="background: #e23d28">
                  <img src="@/assets/imgs/setting/del.png" alt="" />
                </div>
                <div class="b">删除</div>
              </div> -->
            </div>
          </div>
          <div class="dashed"></div>
          <div class="dashed" style="top: 140px"></div>
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="account">
        <div class="top">
          <div class="title">分润信息</div>
        </div>
        <div class="bottom">
          <div class="item">
            <div class="left" style="margin-right: 60px">模板层级</div>
            <div class="right" style="margin-top: -19px; margin-left: 100px">
              <span class="text" style="margin-right: 40px; min-width: 200px">{{
                form.levelSum
              }}</span>
            </div>
          </div>
          <div class="item">
            <div class="left" style="margin-right: 60px">分润规则</div>
            <div
              class="right"
              style="margin-top: -19px; margin-left: 100px; margin-bottom: 30px"
              v-for="(item, i) of form.accountRulesInfoList"
              :key="i"
            >
              <span class="text" style="margin-right: 40px; min-width: 100px">{{
                i == 0 ? "平台分润" : `${i}级商户`
              }}</span>
              <span class="text" style="margin-right: 40px; min-width: 100px">{{
                `${item.fmtAmount} ${form.separateType === 1 ? "%" : "元"}`
              }}</span>
            </div>
          </div>
          <div class="item" style="margin-top: 10px">
            <span class="left">未分润资金归属</span>
            <span class="text">{{
              form.fundBelong == 1 ? "收款方" : "服务方"
            }}</span>
          </div>
          <!-- <div class="item">
              <span class="tit">退款返还设置</span>
              <span class="text">{{form.refundSet=='1'?'不退分润（对订单进行任何退款操作，均不返还分润给收款方）':form.refundSet=='2'?'全额退还分润（对订单进行任何退款操作，返还全部分润给收款方）':'按比例退分润（按退款金额占订单总金额的比例，退还相应比例的分润给收款方）'}}</span>
            </div> -->
          <div class="dashed"></div>
          <!-- <div class="dashed" style="bottom:95px"></div> -->
        </div>
      </div>
    </el-card>

    <el-card class="box">
      <div class="payment">
        <div class="top">
          <div class="title">修改记录</div>
        </div>
        <div class="bottom">
          <el-table :data="dataList">
            <template slot="empty">
              <el-empty
                :image="require('@/assets/imgs/middleWork/k1.png')"
                :image-size="80"
                description="暂无相关数据"
              ></el-empty>
            </template>
            <el-table-column
              show-overflow-tooltip
              prop="gmtCreated"
              align="center"
              label="修改时间"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.gmtCreated ? scope.row.gmtCreated : "-" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="ruleName"
              align="center"
              label="模板名称"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.ruleName ? scope.row.ruleName : "-" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="address" align="center" label="可用余额/元">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="address" align="center" label="可提现金额/元">
        </el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="ruleDesc"
              align="center"
              label="模板说明"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.ruleDesc ? scope.row.ruleDesc : "-" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column
              show-overflow-tooltip
              prop="payMode"
              align="center"
              label="分润时效"
            >
              <template slot-scope="scope"
                >{{
                  scope.row.payMode
                    ? scope.row.payMode == "real"
                      ? "实时分润"
                      : "延时分润"
                    : "-"
                }}
              </template>
            </el-table-column> -->
            <el-table-column
              show-overflow-tooltip
              prop="separateType"
              align="center"
              label="分润模式"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{
                    scope.row.separateType
                      ? scope.row.separateType == "1"
                        ? "按百分比"
                        : "按固定金额"
                      : "-"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="ruleScale"
              align="center"
              label="分润比例"
            >
              <template slot-scope="scope">
                <div
                  style="
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                  "
                >
                  {{ scope.row.ruleScale ? scope.row.ruleScale : "-" }}
                </div>
              </template>
            </el-table-column>
            <!-- <el-table-column show-overflow-tooltip prop="refundSet" align="center" label="返还设置">
          <template slot-scope="scope">
            <div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
              {{ scope.row.refundSet ? scope.row.refundSet=='1'?'不退分润':scope.row.refundSet=='2'?'全额退还分润':'按比例退分润' : "-" }}
            </div>
          </template>
        </el-table-column> -->
          </el-table>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import mixin from "@/mixins/mixin";
import { mapMutations } from "vuex";

export default {
  name: "caseAccpontRulesInfo",
  mixins: [mixin],
  data() {
    return {
      mixinViewModuleOptions: {
        createdIsNeed: false,
        getDataListURL: "",
      },
      dataForm: {},
      form: {},
      dataList: [],
    };
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      this.getInfoList(id);
      this.getEditList(id);
    }
  },
  watch: {
    "$store.state.testLine": {
      handler() {
        if (this.$route.name == this.$options.name) {
          this.testCancel();
          // this.$router.push("/caseAccount/rules");
        }
      },
    },
    deep: true,
  },
  methods: {
    ...mapMutations(["changeLive"]),
    testCancel() {
      this.$store.commit("changeLive", false);
      setTimeout(() => {
        this.$store.commit("changeLive", true);
      }, 0);
      this.$backTo("/caseAccount/rules");
    },
    getInfoList(id) {
      this.$http
        .get(`/api/settle/rules/get`, {
          params: { id },
        })
        .then((res) => {
          if (res.code === "0000") {
            this.form = res.data;
            this.form.accountRulesInfoList = this.form.accountRulesInfoList.map(
              (item, i) => ({
                ...item,
                remainAmountBelong: item.remainAmountBelong ? "Y" : "N",
                memberId: i === 0 ? [item.memberId] : item.memberId,
                // memberId:
                //   i === 0 ? [item.memberId] : this.setMemberId(item.memberId),
              })
            );
            //console.log(this.form.accountRulesInfoList);
            this.form.accountRulesInfoList1 =
              this.form.accountRulesInfoList.filter(
                (f) => f.remainAmountBelong == "N"
              );
            this.form.accountRulesInfoList2 =
              this.form.accountRulesInfoList.filter(
                (f) => f.remainAmountBelong == "Y"
              );
          }
        });
    },
    getEditList(id) {
      let accountRulesId = id;
      this.$http
        .get(`/api/settle/rules/getUpdateByRuleId`, {
          params: { accountRulesId },
        })
        .then((res) => {
          if (res.code === "0000") {
            //console.log(res.data);
            this.dataList = res.data;
          }
        });
    },
    toEdit() {
      this.$router.push({
        path: "/caseAccount/rules/edit",
        query: { id: this.$route.query.id },
      });
    },
    goBack() {
      this.$backTo(`/caseAccount/rules`);
    },
    delFn() {
      this.$confirm("确认删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        customClass: "confirm",
        type: "warning",
        center: true,
      }).then(() => {
        this.$http
          .delete("/api/settle/rules/delete", {
            params: {
              id: this.$route.query.id,
            },
          })
          .then((res) => {
            if (res.code !== "0000") {
              return;
            }
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1000,
            });
            this.goBack();
          })
          .catch(() => {});
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  margin-bottom: 10px;
}
.merchant {
  .main {
    position: relative;
    .dashed {
      border-bottom: 1px dashed #d8d8d8;
      width: 100%;
      position: absolute;
      top: 80px;
    }
    .left {
      display: flex;
      justify-content: start;
      flex-wrap: wrap;
      .item {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1d1c1c;
        width: 43.3%;
        margin-top: 40px;

        .tit {
          display: inline-block;
          margin-right: 20px;
          color: #666666;
        }
      }
    }
    .right {
      position: absolute;
      right: 0px;
      top: 0px;

      .com-wrap {
        margin-top: 0px;
        display: flex;
        .com {
          margin: 0 25px;
          cursor: pointer;

          .t {
            width: 36px;
            height: 36px;
            line-height: 45px;
            text-align: center;
            border-radius: 36px;
            background: #869daa;
          }
          .b {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4f595f;
            text-align: center;
            margin-top: 5px;
          }
        }
      }
    }
  }
}

.account,
.payment,
.merchant {
  padding: 5px 20px 10px 20px;
  .top {
    display: flex;
    align-items: center;
    .title {
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #4f595f;
      margin-right: 35px;
    }
    .noData {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7a8287;
    }
  }
  .bottom {
    margin-top: 0px;
  }
}

.account {
  .bottom {
    position: relative;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    .dashed {
      border-bottom: 1px dashed #d8d8d8;
      width: 100%;
      position: absolute;
      bottom: 36px;
    }
    .item {
      // display: flex;
      width: 100%;
      // background: #ccc;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1d1c1c;
      margin-top: 20px;

      .left {
        display: inline-block;
        // padding-right: 20px;
        margin-right: 20px;
        color: #666666;
      }
      .right {
        .text {
          display: inline-block;
          // width: 175px;
        }
      }
    }
  }
}

.payment {
  .bottom {
    margin-top: 20px;
  }
}

.dFlex {
  display: flex;
}
</style>
